import React from 'react';
import {Layout, Menu, Icon} from 'antd';
import './less/all.less';
const {Footer, Sider} = Layout;
const SubMenu = Menu.SubMenu;
import {connect} from 'dva';
import CourseAddOrModify from './CourseAddOrModify'
import CourseList from './CourseList'
import Video from './Video'
import ReviewInformation from './ReviewInformation'
import Teacher from './Teacher'
import Type from './Type'
import Homework from './Homework'
import Discussion from './Discussion'
import Student from './Student'
import Finance from './Finance'

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      targetComponent: <Teacher/>
    }
  }

  componentWillMount() {
    // let cookieToken = getcookie('cookieToken');
    // let role = getcookie('role');
    // console.log(role);
    // if(cookieToken != null && role == 'admin'){
    // }else {
    //   window.location.replace("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7be34e0f2844079&redirect_uri=http%3a%2f%2fv.huanqiushuju.com%2flogins&response_type=code&scope=snsapi_login&state=3#wechat_redirect");
    // }
  }

  render() {
    let {targetComponent} = this.state;
    console.log(this.state)
    return (
      <div id="components-layout-demo-responsive">
        <Layout>
          <Sider
            breakpoint="lg"
            collapsedWidth="0"
            onCollapse={(collapsed, type) => {
              console.log(collapsed, type);
            }}
          >
            <div className="logo">
              <img src="https://image.youniwote.com/hqyy/home/thirdHomeSlideImg.png" height="20px"/>
              <span> 环球云逸</span>
            </div>

            <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} onClick={(e) => {
              console.log(e.key);
              //点击菜单以后出现的各个情况
              {
                if (e.key == '1-1') {
                  this.setState({
                    targetComponent: <CourseAddOrModify/>
                  })
                }else if(e.key == '1-2') {
                  this.setState({
                    targetComponent: <CourseList/>
                  })
                } else if (e.key == 2) {
                  this.setState({
                    targetComponent: <Video/>
                  })
                } else if (e.key == 3) {
                  this.setState({
                    targetComponent: <ReviewInformation/>
                  })
                } else if (e.key == 4) {
                  this.setState({
                    targetComponent: <Teacher/>
                  })
                } else if (e.key == 5) {
                  this.setState({
                    targetComponent: <Type/>
                  })
                } else if (e.key == 6) {
                  this.setState({
                    targetComponent: <Homework/>
                  })
                } else if (e.key == 7) {
                  this.setState({
                    targetComponent: <Discussion/>
                  })
                } else if (e.key == 8) {
                  this.setState({
                    targetComponent: <Student/>
                  })
                } else if (e.key == 9) {
                  this.setState({
                    targetComponent: <Finance/>
                  })
                }
              }
            }}>
                <SubMenu key="sub4" title={<span><Icon type="appstore-o"/><span className="nav-text">课程</span></span>}>
                  <Menu.Item key="1-1"> 新增课程 </Menu.Item>
                  <Menu.Item key="1-2"> 管理课程 </Menu.Item>
                </SubMenu>

              <Menu.Item key="2">
                <Icon type="video-camera"/>
                <span className="nav-text">视频</span>
              </Menu.Item>
              <Menu.Item key="3">
                <Icon type="file-pdf"/>
                <span className="nav-text">资料</span>
              </Menu.Item>
              <Menu.Item key="4">
                <Icon type="user"/>
                <span className="nav-text">教师</span>
              </Menu.Item>
              <Menu.Item key="5">
                <Icon type="bars"/>
                <span className="nav-text">类别</span>
              </Menu.Item>
              <Menu.Item key="6">
                <Icon type="file-text"/>
                <span className="nav-text">作业</span>
              </Menu.Item>
              <Menu.Item key="7">
                <Icon type="message"/>
                <span className="nav-text">讨论</span>
              </Menu.Item>
              <Menu.Item key="8">
                <Icon type="usergroup-add"/>
                <span className="nav-text">学员</span>
              </Menu.Item>
              <Menu.Item key="9">
                <Icon type="area-chart"/>
                <span className="nav-text">财务</span>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout>
            {targetComponent}
            <Footer style={{textAlign: 'center'}}>
              环球云逸管理后台 ©2017 Created by YYR&D
            </Footer>
          </Layout>
        </Layout>
      </div>
    )
  }
}


function mapStateToProps(state) {
  //state是在前面的models里面进行了定义，state是全部models的，而state.Video是 namespace: 'Video'的
  const {} = state.manage;

  return {};
}
export default connect(mapStateToProps)(Index);
